﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>form validation</title>
<script type="text/javascript" src="js/N13FormValidation-2.js"></script>
<style>
ul {
	list-style-type: none;
}
label {
	display: block;
	float: left;
	width: 4em;
}
.valid_element_class {
	border-color:green;
}
.invalid_element_class {
	border-color:red;
}
.focus_element_class {
	border-color:blue;
}
.valid_message_class {
	margin-left: 1em;
	font-weight: bold;
	color:green;
}
.invalid_message_class {
	margin-left: 5px;
	font-weight: bold;
	color:red;
}
</style>
</head>
<body>
<form id="form" action="#">
	<fieldset>
		<legend>Form Validation:</legend>
		<ul>
			<li>
				<label for="name">name</label>
				<input id="name" type="text"/>
			</li>
			<li>
				<label for="pass">pass</label>
				<input id="pass" type="password" />
			</li>
			<li>
				<label for="email">email</label>
				<input id="email" type="text"/>
			</li>
			<li>
				<label for="check">check</label>
				<input id="check" type="checkbox" />
			</li>
			<li>
				<input value="submit" type="submit" />
			</li>
		</ul>
	</fieldset>
</form>
<script type="text/javascript" >

N13.register('form',[
		{
			id:'name',
			type:'Required',
			validMsg:'ok',
			validOnBlur:true,
			renderValid:true
		},
		{
			id:'pass',
			type:'Length',
			minLength:6,
			maxLength:10,
			validOnBlur:true,
			renderValid:true
		},
		{
			id:'email',
			type:'Email',
			validOnBlur:true,
			renderValid:true
		},
		{
			id:'check',
			type:'Accept',
			validOnBlur:true,
			renderValid:true
		}
	]);

/*   与上面完全等价
N13.registerForm('form');
N13.registerElement('form', 'name', {validOnBlur:true,renderValid:true});
N13.registerValidator('name', Validation.REQUIRED);
N13.registerElement('form', 'pass', {validOnBlur:true,renderValid:true});
N13.registerValidator('pass', Validation.LENGTH, {minLength:6,maxLength:10});
N13.registerElement('form', 'email', {validOnBlur:true,renderValid:true});
N13.registerValidator('email', Validation.EMAIL);
N13.registerElement('form', 'check', {validOnBlur:true,renderValid:true});
N13.registerValidator('check', Validation.ACCEPT);
*/
</script>
</body>
</html>
